<template>
    <div>
        <el-card class="box-card">
            <div style="margin-top: 25px">
                <el-row style="margin-bottom: 20px">
                    <el-col :span="24"><div class="grid-content bg-purple-dark">
                        <span style="font-size: 25px;">登录</span>
                    </div></el-col>
                </el-row>

                <el-row>
                    <el-col :span="7" class="labClass"><div class="grid-content bg-purple">
                        <span style="">用户名: </span>
                    </div></el-col>
                    <el-col :span="14"><div class="grid-content bg-purple-light">
                        <el-input v-model="username" placeholder="请输入用户名"></el-input>
                    </div></el-col>
                    <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
                        *
                    </div></el-col>
                </el-row>

                <p>
                    <el-row>
                        <el-col :span="7" class="labClass"><div class="grid-content bg-purple">
                            <span>用户密码: </span>
                        </div></el-col>
                        <el-col :span="14" ><div class="grid-content bg-purple-light">
                            <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
                        </div></el-col>
                        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
                            *
                        </div></el-col>
                    </el-row>
                </p>
                <el-button type="primary" @click="login">登录</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                username:'',
                pwd:''
            }
        },
        methods:{
            login(){
                this.axios.get("/jxc/user/login",{
                    params:{
                        username:this.username,
                        pwd:this.pwd
                    }
                }).then(
                    r => {
                        // console.log(r.data);
                        if (r.data.code == "no") {
                            this.$message({
                                message: '用户名或者密码错误',
                                type: 'error',
                                duration: 1000
                            });
                            this.username = "";
                            this.pwd = "";
                        } else if (r.data.code == "ok") {
                            this.$store.state.user = r.data;
                            this.$router.push("/Jxcms")
                        }
                    }
                )
            },
        }
    }
</script>

<style scoped>
    .labClass{
        margin-top: 15px;
    }
    .box-card{
        height: 270px;
        margin-top: 10%;
        margin-left: 30%;
        margin-right: 30%;
    }
</style>